<script setup lang="ts">
import type { NightAuditOrder } from '@/api/hotel/night-audit';

import { computed, ref, watch } from 'vue';

import { Modal, Tabs } from 'ant-design-vue';

import PaymentTab from './PaymentTab.vue';

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  success: [];
  'update:visible': [value: boolean];
}>();

const { TabPane } = Tabs;

// Props
interface Props {
  visible: boolean;
  order: NightAuditOrder | null;
}

// 响应式数据
const activeTab = ref('payment');

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 监听器
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      activeTab.value = 'payment';
    }
  },
);

// 处理成功
const handleSuccess = () => {
  emit('success');
};

// 处理取消
const handleCancel = () => {
  visible.value = false;
};
</script>

<template>
  <Modal
    :open="visible"
    @update:open="visible = $event"
    title="入账"
    width="800px"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="account-entry-modal">
      <!-- 标签页 -->
      <Tabs
        :active-key="activeTab"
        @update:active-key="activeTab = $event"
        class="entry-tabs"
      >
        <TabPane key="payment" tab="付款">
          <PaymentTab
            :order="order"
            @success="handleSuccess"
            @cancel="handleCancel"
          />
        </TabPane>
        <TabPane key="consumption" tab="消费">
          <div class="placeholder-tab">
            <p>消费入账功能开发中...</p>
          </div>
        </TabPane>
        <TabPane key="pre_authorization" tab="预授权">
          <div class="placeholder-tab">
            <p>预授权入账功能开发中...</p>
          </div>
        </TabPane>
        <TabPane key="small_goods" tab="小商品">
          <div class="placeholder-tab">
            <p>小商品入账功能开发中...</p>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </Modal>
</template>

<style scoped>
.account-entry-modal {
  min-height: 400px;
}

.entry-tabs {
  margin-top: 16px;
}

:deep(.ant-tabs-content-holder) {
  padding: 16px 0;
}

.placeholder-tab {
  padding: 40px 20px;
  color: #666;
  text-align: center;
}

.placeholder-tab p {
  margin: 0;
  font-size: 16px;
}
</style>
